<!--
 * @Description: 我的
 * @Author: rendc
 * @Date: 2023-03-10 08:54:19
 * @LastEditors: 周云海 2779039093@qq.com
 * @LastEditTime: 2023-03-20 23:44:11
-->
<script setup>
import { showConfirmDialog } from "vant";
import "vant/es/dialog/style";
import { useRouter } from "vue-router";
const router = useRouter();
const openDialog = () => {
  showConfirmDialog({
    title: "提示",
    message: "欢迎来到美的商城请登录",
    confirmButtonText: "登录",
    confirmButtonColor: "#845f3f",
    cancelButtonText: "退出",
  })
    .then(() => {
      // 同意 - 跳转到登录页
      router.push("/login");
    })
    .catch(() => {
      // 不同意
    });
};
const toLogout = () => {
  sessionStorage.removeItem("user");
  // router.push("/");
};
const user = sessionStorage.getItem("user");
</script>
<template>
  <div
    class="header"
    @click="openDialog()"
  >
    <div class="left">
      <van-image
        round
        width="55px"
        src="https://fcmms.midea.com/ccrm-beta/userHeadImg/defaultHeadImg.png"
      />
    </div>
    <div class="middle">
      {{user?user:"请登录"}}
    </div>
    <van-row>
  <van-col span="24"><van-icon name="" color="#1989fa" /></van-col>
</van-row>
<van-row>
  <van-col span="24"><van-icon name="" color="#1989fa" /></van-col>
</van-row>
<van-row>
  <van-col span="24"><van-icon name="" color="#1989fa" /></van-col>
</van-row>
<van-row>
  <van-col span="24"><van-icon name="" color="#1989fa" /></van-col>
</van-row>
<van-row>
  <van-col span="24"><van-icon name="" color="#1989fa" /></van-col>
</van-row>
<van-row>
  <van-col span="24"><van-icon name="" color="#1989fa" /></van-col>
</van-row>
<van-row justify="space-around">
  <van-col span="4" offset="2"><font color="white">0</font></van-col>
  <van-col span="4"><font color="white">0</font></van-col>
  <van-col span="4"><font color="white">0</font></van-col>
  <van-col span="3"><font color="white">0</font></van-col>
  <van-col span="4"><van-icon name="cart-o" size="18px" color="white"/> </van-col>
</van-row>
<van-row justify="space-around">
  <van-col span="4"><font color="white">收藏商品</font></van-col>
  <van-col span="4"><font color="white">订阅商铺</font></van-col>
  <van-col span="4"><font color="white">津贴卡卷</font></van-col>
  <van-col span="3"><font color="white">积分</font></van-col>
  <van-col span="4"><font color="white">购物车</font></van-col>
</van-row>
  <van-image
  width="390px"
  height="80px"
  src="/src/assets/hei1.png"
/>
</div>
<div style="background-color: #f4f4f4">
  <div class="main">
    <!-- 我的订单 -->
    <van-cell-group>
      <van-cell
        title="我的订单"
        value="全部"
        is-link to="Dingdan"
      />
    </van-cell-group>
    <!-- 布局 -->
    <van-row style="background-color:white;">
      <van-col span="5">
        <div class="card">
          <van-icon name="pending-payment" size="30px"/>
          <div class="text">待付款</div>
        </div>
      </van-col>
      <van-col span="4">
        <div class="card">
          <van-icon name="send-gift-o" size="30px"/>
          <div class="text">待发货</div>
        </div>
      </van-col>
      <van-col span="4">
        <div class="card">
          <van-icon name="logistics" size="30px" />
          <div class="text">待收货</div>
        </div>
      </van-col>
      <van-col span="5">
        <div class="card">
          <van-icon name="comment-o" size="30px" />
          <div class="text" >评价管理</div>
        </div>
      </van-col>
      <van-col span="5">
        <div class="card">
          <van-icon name="after-sale" size="30px"/>
          <div class="text">退款/售后</div>
        </div>
      </van-col>
    </van-row>
    <!-- 我的资产等 -->
  
    <div style="margin-top: 14px;">
      <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-icon
            name="/src/assets/xtb1.png"
            class="myIcon38"
          />
          <span class="title" style="font-size: 15px;">会员福利社</span>
        </template>
      </van-cell>
    </div>
    <div style="margin-top: 10px;">
      <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-icon
            name="/src/assets/xtb2.png"
            class="myIcon38"
          />
          <span class="title" style="font-size: 15px;">急速保价</span>
        </template>
      </van-cell>
    </div>
    <div style="margin-top: 10px;">
      <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-icon name="/src/assets/xtb3.png" class="myIcon38"/>
          <span class="title" style="font-size: 15px;">礼品卡</span>
        </template>
      </van-cell>
    </div>
    </div>

    <div style="margin-top: 10px;">
        <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-icon
            name="/src/assets/xtb4.png"
            class="myIcon38"
          />
          <span class="title" style="font-size: 15px;">帮助中心及隐私协议</span>
        </template>
      </van-cell>
    </div>
    <div style="margin-top: 10px;">
        <van-cell is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <van-icon
            name="setting"
            size="25"
            color="#31c27c"
          />
          <span style="font-size: 15px;"> &nbsp;设置</span>
        </template>
      </van-cell>   
    </div>

  
<van-divider dashed :style="{ color: '#999999', borderColor: '#999999', padding: '0 16px' }">热卖推荐</van-divider>
<div style="margin-top: 10px;">
<van-grid :column-num="2" :center="false" :gutter="10" :border="true">
<van-grid-item  to="info">
	<div><van-tag type="warning" >官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="161"
height="161"
src="https://pic.midea.cn/smartpic/pic/106732696ead6508da05a9113e.jpg"
/>
<div style="margin-bottom: 15px;">美的风尊1.5匹一级能效智能变频冷暖空调  时尚版</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥2999</div>
	<p style="color: #333333; font-size:14px ;">¥2939 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
</div>
</van-grid-item>
<van-grid-item  to="info">
	<div><van-tag type="warning" >官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="161"
height="161"
src="https://pic.midea.cn/smartpic/pic/1064d4184817c2700a66dc539d.jpg"
/>
<div style="margin-bottom: 15px;">【轻奢柜机】美的风尊大风口一级能效3匹变频冷暖空调智能柜机</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥6999</div>
	<p style="color: #333333; font-size:14px ;">¥6859 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>	
</div>
</van-grid-item>
<van-grid-item  to="info">
	<div><van-tag type="warning" ></van-tag>
	<van-tag type="primary" color="#333333"></van-tag></div>
	<van-image
width="161"
height="161"
src="https://pic.mdcdn.cn/pc/pic/202303/31bf440b1710186fb8c0391bb644bb60.jpg"
/>
<div style="margin-bottom: 15px;">创维电视 50A2 50英寸 4K超高清护眼无屏闪电视 智能语音教育</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥1399</div>
	<p style="color: #333333; font-size:14px ;"><van-tag type="primary" color="#333333"></van-tag></p>
	</div>	
</div>
</van-grid-item>
<van-grid-item  to="info">
	<div><van-tag type="warning" >会员日</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="161"
height="161"
src="https://dsdcp.smartmidea.net/mcsp/prod/20221121/1c6aa336967a4b94b747aaf47ca74f77.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;">【新品】美的直排式4KG迷你滚筒式烘干机干衣机紫外线除菌</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥899</div>
	<p style="color: #333333; font-size:14px ;">¥872 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>	
</div>
</van-grid-item>
<van-grid-item  to="info">
	<div><van-tag type="warning" >官方正品</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="161"
height="161"
src="https://pic.mdcdn.cn/pc/pic/202303/58224482d529f70134ebff7ee28bba1a.jpg"
/>
<div style="margin-bottom: 15px;">【60厘米超薄】新品十字门冰箱483L 全空间PT净味微缝嵌入</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥6199</div>
	<p style="color: #333333; font-size:14px ;">¥5999 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>	
</div>
</van-grid-item>
<van-grid-item  to="info">
	<div><van-tag type="warning" >会员日</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="161"
height="161"
src="https://dsdcp.smartmidea.net/mcsp/prod/20230222/05d3fa71a5414daf93e705d7c63eb123.jpg?x-oss-process=image/resize,limit_0,w_280,h_280"
/>
<div style="margin-bottom: 15px;">【洗烘套装】小天鹅洗衣机热泵烘干机干衣组合</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥6199</div>
	<p style="color: #333333; font-size:14px ;">¥5999 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>	
</div>
</van-grid-item>
<van-grid-item  to="info">
	<div><van-tag type="warning" >厨卫热卖</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="161"
height="161"
src="https://pic.midea.cn/smartpic/pic/106943151169eb64f879b5768a.jpg"
/>
<div style="margin-bottom: 15px;">【年度绿电好物】美的 燃气热水器 节能零冷水 一级能效 WIFI智控 16LN3</div>
<div>
	<div style="float: left;">
    <div style="color: #FF6600;font-size: 18px;">￥2299</div>
	<p style="color: #333333; font-size:14px ;">¥2207 <van-tag type="primary" color="#333333">PRO</van-tag></p>
	</div>
	
</div>
</van-grid-item>
<van-grid-item  to="info">
	<div><van-tag type="warning" >官方直营</van-tag>
	<van-tag type="primary" color="#333333">PRO精选</van-tag></div>
	<van-image
width="161"
height="161"
src="https://pic.midea.cn/smartpic/pic/106d25d51064167b349329befe.png"
/>
<div style="margin-bottom: 15px;">【Hot】电饭煲 4L容量 高端优雅 18分钟热水快煮 智能预约 立体IH大火加热 </div>
<div>
<div style="float: left;">
<div style="color: #FF6600;font-size: 18px;">￥389</div>
<p style="color: #333333; font-size:14px ;">¥369 <van-tag type="primary" color="#333333">PRO</van-tag></p>
</div>
</div>
</van-grid-item>
</van-grid>

</div>


</div>
<van-divider dashed style="color: #c7c7c7; font-size: 12.2px; margin-bottom: 100px;">已经到底啦~</van-divider>
</template>

<style lang="less" scoped>
.header {
  background-image: url(https://img.mdcdn.cn/h5/img/my/level_bg_1_2x.png?t=20221110);
  height: 218px;
  .left {
    float: left;
    margin-top: 20px;
    padding-left: 25px;
  }
  .middle {
    color: white;
    font-size: 14px;
    float: left;
    // 垂直居中
    line-height: 100px;
    padding-left: 18px;
  }
  .right {
    float: right;
    line-height: 100px;
    padding-right: 20px;
  }
}
.main {
  .card {
    margin: 10px;
    text-align: center;
    img {
      width: 40px;
    }
    .text {
      color: rgba(0, 0, 0, 0.6);
      font-size: 13px;
    }
  }
}
:deep(.van-cell__title) {
  span {
    color: #333333;
  }
}

.myIcon38 {
  float: left;
  font-size: 38px;
}
.title {
  line-height: 38px;
}
.shangmian{
  background-image: url(https://img.mdcdn.cn/h5/img/my/level_bg_1_2x.png?t=20221110);
}

.card2 {
    background-color: white;
    width: 171.5px;
    height: 287.5px;
    display: inline-block;
    margin-left: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    img {
      width: 171.5px;
    }
    .name {
      color: rgba(0, 0, 0, 0.8);
      font-size: 14px;
      padding: 6px;
    }
  }
</style>
222